<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <style>
        .text{
            font-size: 40px;
            width: 100%;
            margin:auto;
            position: absolute;
            top:60%;
            z-index:3;
            text-align: center;
            color:#fff;
        }
        .btn{
            position: absolute;
            top:80%;
            z-index:3;
            text-align: center;
            width:100%;height: 40px;background:yellow ;
        }
        .btn a{font:30px "Microsoft Himalaya" ;text-decoration: none;margin-top:5px}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide box1">
                <img src="img/timg-(2).png" width="100%" height="100%">
                  <p class="text ani "  swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s">叮咣快修</p>
            </div>
            <div class="swiper-slide box3">
                <img src="img/twimg.png" height="100%" width="100%"/>
                <p class="text ani "style="font-size: 50px; top:50%" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" >爱运动</p>
                <p class="text ani "  style="font-size:20px;top:62%" swiper-animate-effect="zoomIn " swiper-animate-duration="1s" >你的私人教练</p>

            </div>
          <div class="swiper-slide box2">
              <img src="img/timg.png" height="100%" width="100%"/>
              <p class="text ani "style="font-size: 25px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" >乐趣与你同在</p>
              <p class="text ani "  style="font-size: 25px;top:67%" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" >—Wear A Day—</p>
              <div class="btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s"><a href="">立即体验</a></div>
          </div>

        </div>
    </div>


    <script>
         var mySwiper = new Swiper('.swiper-container',{
            pagination:'.swiper-pagination',
             onInit:function(swiper){
                 swiperAnimateCache(swiper);
                swiperAnimate(swiper);
            },
           onSlideChangeEnd:function(swiper){
              swiperAnimate(swiper)
            }
        })
    </script>
</body>
</html>